<template>
	<div class="shopping" v-tap="tapFn">
		<div class="salerInfo" v-if="salerInfoShow">
			<div class="salerTop content-front">
				<span class="goBack flleft" v-on:click="boBack()">返回</span>
				<span class="flright">搜索</span>
				<span class="flright" v-on:click="test_vuex()">分享</span>
				<span class="flright">拼单</span>
			</div>
			<div class=""></div>
		</div>
		<myheader :propsTitle=propsTitle v-if="myheaderShow"></myheader>
		<div class="tap" v-bind:class="tapTop">
			<div class="tap_item">
				<span v-on:click="go('/shopping/buy','buy')" v-bind:class="{active:(tapActive=='buy')&&('aaa'=='aaa')}">点菜</span>
			</div>
			<div class="tap_item">
				<span v-on:click="go('/shopping/saler','saler')" v-bind:class="{active:tapActive=='saler'}">商家</span>
			</div>
		</div>
		<transition :name="transitionName">
			<keep-alive>
				<router-view  v-bind:class="mainTop" :jrollRefresh=jrollRefresh :getBottomShow=getBottomShow v-on:changeBottomStatus="parentEvent"></router-view>
			</keep-alive>
		</transition>
		<div class="modal" v-if="showModal" @click="clickModal()"></div>
		<div class="productDiv" v-if="productShow" v-on:click="clickProduDetail()">
			<img v-bind:src="productData.image" alt="">
			<div>
				<span>{{productData.name}}</span>
				<p>
              		<span>月售{{productData.monthSale}}</span>
              		<span>赞{{productData.fabulous}}</span>
            	</p>
			</div>
		</div>
	</div>
</template>
<script>
	import buy_name from './component/buy.vue'
	import saler from './component/saler.vue'
	import router from '../../router'
	import header from '../../components/common/header/header.vue'
	import Vuex from 'vuex'
	export default {
		name: "shopping",
		components: {
			"buy": buy_name,
			"saler": saler,
			'myheader':header
		},
		data() {
			return {
				showModal: false,
				getBottomShow: true,
				tapActive: "buy",
				propsTitle:"必胜客",
				mainTop:"top137",
				tapTop:"",
				salerInfoShow:true,
				myheaderShow:false,
				tapFn:null,
				jrollRefresh:"default",
				transitionName:""
			}
		},
		computed : {
			//这里要写到computed里面去，写到data里面就会报错,因为用到vuex
			productShow:function(){
				return this.$store.getters.productShowStateGetters; 
			},
			productData:function(){
				return this.$store.state.product.productArgs;
			}
		},
		ready() {
			console.log("A")
		},
		beforeCreate() {},
		created() {
			var that = this;
			var hashArr = location.hash.split('/');
			this.tapActive = hashArr[hashArr.length - 1];
			//滑动对象
			this.tapFn = {
				upFn:function(){
					that.salerInfoShow = false;
					that.myheaderShow = true;
					that.tapTop = "top40";
					that.mainTop = "top75";
					that.jrollRefresh = "defaultUp"   //给个引起变化的字符串
				},
				downFn:function(){
					that.salerInfoShow = true;
					that.myheaderShow = false;
					that.tapTop = "";
					that.mainTop = "top137";
					that.jrollRefresh = "defaultDown"   //给个引起变化的字符串
				}
			}
		},
		mounted() {},
		methods: {
			init: function() {},
			go: function(url="", name="") {
				router.replace(url);
				this.tapActive = name;
			},
			boBack: function() {
				history.go(-1);
				this.tapActive = "buy";
			},
			parentEvent: function(str) {
				this.showModal = str;
			},
			clickModal: function() {
				this.showModal = false;
				//传个时间戳过去子组件告诉他我点击了modal，再在子组件里面watch这个时间戳
				var time = new Date().getTime();
				this.getBottomShow = time;

				//this.$store.state.modalState = false;
			},
			//commit触发vuex的函数
			test_vuex(){
				//在buy.vue的test函数里面有改变state的username值，在这里可以获取到
				this.$store.commit("showUserName");
			},
			clickProduDetail(){
				this.$store.dispatch('changeProducStateActions');
			}
		},
		watch: {
			'$route' (to, from) {
				const toDepth = to.path.split('/')
				const fromDepth = from.path.split('/')
				var routeName = toDepth[toDepth.length-1];
				//如果点击的是商家
				if(routeName=="buy"){
					this.transitionName = 'slide-fade-left';
					this.tapActive = routeName;
				}else if(routeName=="saler"){
					this.transitionName = 'slide-fade-right';
					this.tapActive = routeName;
				}
			}
		}
	}
</script>
<style>
	html,
	body,
	.shopping {
		height: 100%;
	}
	
	.tap {
		width: 100%;
		overflow: auto;
		border-top: 1px solid #F2F2F2;
		border-bottom: 1px solid #F2F2F2;
		z-index: 10;
	}
	
	.tap .tap_item {
		width: 50%;
		float: left;
		background: white;
		z-index: 5;
	}
	
	.tap .tap_item .active {
		border-bottom: 2px solid orange;
	}
	
	.tap .tap_item span {
		display: inline-block;
		height: 100%;
		padding: 5px 0px;
		box-sizing: border-box;
		border: 2px solid white;
	}
	
	.flright {
		float: right;
	}
	
	.flleft {
		float: left;
	}
	
	.salerInfo {
		color: floralwhite;
		height: 100px;
		filter: alpha(opacity=100 finishopacity=50 style=1 startx=0, starty=0, finishx=0, finishy=150) progid: DXImageTransform.Microsoft.gradient(startcolorstr=red, endcolorstr=blue, gradientType=0);
		-ms-filter: alpha(opacity=100 finishopacity=50 style=1 startx=0, starty=0, finishx=0, finishy=150) progid: DXImageTransform.Microsoft.gradient(startcolorstr=red, endcolorstr=blue, gradientType=0);
		background: red;
		/* 一些不支持背景渐变的浏览器 */
		background: -moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5));
		background: -webkit-gradient(linear, 0 0, 0 bottom, from(#663300), to(#663333));
	}
	
	.content-front {
		position: absolute;
		left: 0px;
		right: 0px;
		height: 100px;
		text-align: center;
		padding: 10px;
		box-sizing: border-box;
	}
	
	.shopping .modal {
		height: 100%;
		width: 100%;
		z-index: 10;
		background: black;
		opacity: 0.7;
		position: absolute;
		top: 0px;
		left: 0px;
	}
	
	.slide-fade-right-enter-active,.slide-fade-left-enter-active {
		transition: all .2s ease;
	}
	
	.slide-fade-right-leave-active,.slide-fade-left-enter-active {
		transition: all .2s ease;
	}
	
	.slide-fade-right-enter,
	.slide-fade-left-leave-active {
		transform: translateX(300px);
		opacity: 0;
		background: white;
	}
	
	.slide-fade-left-enter,
	.slide-fade-right-leave-active{
		transform: translateX(-300px);
		opacity: 0;
		background: white;
	}

	.productDiv{
		height:100%;
		width:100%;
		background:white;
		position:absolute;
		top:0px;
	}

	.productDiv img{
		width: 100%;
	}
	
	.top40{
		margin-top: 40px;
	}
	.top137{
		top: 137px;
	}
	.top75{
		top: 75px;
	}
</style>